<template>
      <h1>这是 My 组件</h1>
      abc: {{ $route.query.abc }} <br>
      age: {{ $route.query.age }} <br>
      id: {{ $route.params.id }} <br>
      <router-link to="/index/MainPage">Main</router-link> |
      <router-link to="/index/LoginPage">Login</router-link> |
      <router-link to="/index/RegisterPage">Register</router-link> |
      <router-link to="/index/MyPage">my</router-link> <br> |
      <router-link to="/v1/api/test/get2?abc=10abca&age=2000">字符串传参</router-link> |
      <router-link to="/svip">访问SVIP重定向</router-link> |

       <!-- 动态属性绑定 -->
	    <router-link :to="{ name:'get2', query: { abc: '15abca', age: '20' } }">动态属性绑定</router-link> |
        <router-link :to="{ name:'get1', params:{id:111111} }">动态属性绑定路径</router-link> |


	    <!-- 编程式导航 -->
	    <button @click="goTo()">编程式导航</button>
</template>
 
<script>
export default {
    name: "MyPage"
}
</script>

<script setup>
    //子组件
    import { inject } from 'vue'
    import { useRouter } from 'vue-router';
    //子组件通过inject注入父组件提供的 数据
    const web = inject("provideWeb")
    console.log("provideWeb:",web)

    const url = inject("provideUrl")
    console.log("provideUrl:",url)

    //子组件通过inject注入父组件提供的 函数
    const funcUserAdd = inject("provideFuncUserAdd")
    console.log("provideFuncUserAdd:",funcUserAdd)



const router = useRouter()

let userId = 100
let userName = "邓瑞"

const goTo = ()=> {
    //router.push("/user/007/name/邓瑞")
    //router.push({ path: '/content', query: { id: 200, title: '邓瑞' } })
    router.push({ name: 'get1', params: { id: '10000000'}})
}
</script>